<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>挂车管理</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="pageContentWhole">
        <a-row>
            <a-col :span="24">
              <a-form layout="inline">
                <a-form-item label="车牌号">
                  <a-input v-model="searchForm.trailerNumber"/>
                </a-form-item>
                <a-form-item label="所属车队">
                  <a-select class="selectInputWidth"
                    show-search
                    :show-arrow="false"
                    :filter-option="false" :default-active-first-option="false"
                    :not-found-content="null"
                    v-model="searchForm.custId"
                    @search="handleNameChange"
                  >
                    <a-select-option value="">全部</a-select-option>
                    <a-select-option v-for="d in custIdList" :key="d.id">{{ d.name }}</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item label="挂车状态">
                  <a-select v-model="searchForm.status" class="selectWidth">
                    <a-select-option value="">全部</a-select-option>
                    <a-select-option :value="1">正常</a-select-option>
                    <a-select-option :value="0">冻结</a-select-option>
                  </a-select>
                </a-form-item>

                <a-form-item>
                  <a-button type="primary" @click="handleSubmit1">查询</a-button>
                </a-form-item>
                <a-form-item>
                  <a-button type="primary" @click="handleCreate">+  创建挂车</a-button>
                </a-form-item>
                <a-form-item>
                  <a-button type="primary" @click="exportExcel">导出excel</a-button>
                </a-form-item>
              </a-form>

              <a-table :columns="columns" :data-source="tableData" class="tableMargin" :pagination="pagination" rowKey="truckId">
                <template slot="rn" slot-scope="text, record, index">{{index + 1}}</template>
                <span slot="udTitle">
                  总整备质量(kg)
                  <a-tooltip>
                    <template slot="title">
                      总整备质量=牵引车整备质量+挂车整备质量
                    </template>
                    <a-icon type="question-circle" />
                  </a-tooltip>
                </span>
                <template slot="operation" slot-scope="text, record">
                    <a @click="viewIt(record.truckId)">详情</a>
                    <a @click="freezeIt(record.truckId, record.status)">{{record.status === 1 ? '冻结': (record.status === 0 ? '恢复':'')}}</a>
                  </template>
              </a-table>
            </a-col>
        </a-row>
    </div>
  </div>
</template>

<script>
import debounce from 'lodash/debounce'
import {queryCustNameList} from '@/api'
import {commonExport} from '@/api/request'
import { queryTrailerList, updateTruckInfoStatus } from '@/api/landCenter'

export default {
  data () {
    this.handleNameChange = debounce(this.handleNameChange, 800)
    return {
      custIdList: [],
      searchForm: {
        custId: '',
        trailerNumber: '',
        status: ''
      },
      columns: [{
        title: '序号',
        width: 60,
        scopedSlots: {customRender: 'rn'}
      }, {
        title: '车牌号',
        dataIndex: 'trailerNumber',
        ellipsis: true
      }, {
        title: '所属车队',
        dataIndex: 'custName',
        ellipsis: true
      }, {
        title: '状态',
        dataIndex: 'status',
        customRender: (text, row, index) => {
          if (text === 1) {
            return <a-badge status="success" text="正常"/>
          } else if (text === 0) {
            return <a-badge status="error" text="冻结"/>
          }
        },
        _needName: true
      }, {
        title: '操作',
        width: 150,
        scopedSlots: {customRender: 'operation'}
      }],
      tableData: [],
      pagination: {},
      pageNum: 1,
      pageSize: 10
    }
  },
  created () {
  },
  methods: {
    handleNameChange (nameLike) { // 车队
      if (nameLike) {
        queryCustNameList({
          nameLike,
          belongCompany: 'JIA_TE',
          custTypeLike: 'TEAM',
          status: 1
        }).then(rsp => {
          this.custIdList = rsp.data
        })
      } else {
        this.custIdList = []
      }
    },
    handleSubmit1 () {
      this.pageNum = 1
      this.handleSubmit()
    },
    handleSubmit () {
      queryTrailerList({
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(rsp => {
        this.tableData = rsp.data.list
        this.pagination = {
          current: this.pageNum,
          pageSize: rsp.data.pageSize,
          total: rsp.data.total,
          showQuickJumper: false,
          showSizeChanger: true,
          showTotal: total => `共${total}条记录 第${this.pageNum}/${rsp.data.pages}页`,
          onChange: pageNum => {
            this.pageNum = pageNum
            this.handleSubmit()
          },
          onShowSizeChange: (current, size) => {
            this.pageNum = current
            this.pageSize = size
            this.handleSubmit()
          }
        }
      })
    },
    handleCreate () {
      if (!this.$root._bc.create) {
        this.$message.error('您无此权限！')
        return
      }
      this.$router.push('railerManagement/railerCreate')
    },
    exportExcel () {
      commonExport('/truck/exportTrailerList', {
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        columns: this.columns
      })
    },
    viewIt (id) {
      this.$router.push('railerManagement/' + id)
    },
    freezeIt (id, isFrozen) {
      if (!this.$root._bc.frozen) {
        this.$message.error('您无此权限！')
        return
      }
      let text = '确定冻结吗？'
      let successText = '冻结成功！'
      if (isFrozen === 0) {
        text = '确定恢复正常吗？'
        successText = '恢复成功！'
      }

      let _this = this
      this.$confirm({
        title: text,
        okType: 'danger',
        onOk () {
          updateTruckInfoStatus({truckId: id, status: 1 - isFrozen}).then(rsp => {
            _this.$message.success(successText)
            _this.handleSubmit()
          })
        }
      })
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.handleSubmit()
    })
  }
}
</script>

<style lang="less" scoped>
</style>
